<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <script src="./lib/vue.js"></script>
    <link rel="stylesheet" href="./css/bootstrap.css">
</head>
<body>
    <div id="app">

        
        <div class="panel panel-primary">
              <div class="panel-heading">
                    <h3 class="panel-title">添加品牌</h3>
              </div>
              <div class="panel-body form-inline">
                <label for="">
                    Id:
                    <input type="text" class="form-control" v-model="id">
                </label>
                <label for="">
                    Name:
                    <input type="text" class="form-control" v-model="name">
                </label>
                <label for="">
                    搜索关键字:
                    <input type="text" class="form-control" v-model="keyword">
                </label>
                <input type="button" value="添加" class="btn btn-primary" @click='add'>
              </div>
        </div>
        

        <table class="table table-striped table-bordered table-responsive">
            <thead class="thead-inverse">
                <tr>
                    <th>Id</th>
                    <th>Name</th>
                    <th>Ctime</th>
                    <th>Operation</th>
                </tr>
                </thead>
                <tbody>
                    <!-- vfor的时候必须绑定key否则会出现单选框选到第n个动态添加 错位 -->
                    <!-- 绑定key key只能选择num/string 并用bind形式绑定-->
                    <!-- 如果出问题一定先考虑是否绑定了key -->
                    <tr v-for="(item, index) in search(keyword)" :key="item.id">
                        <td>{{item.id}}</td>
                        <td v-text="item.name"></td>
                        <td>{{item.ctime | dataFormat}}</td>
                        <td><a href="" @click.prevent='remove(item.id)'>删除</a></td>
                    
                    </tr>
                    
                </tbody>
        </table>

        {{privateMSG | private}}
    </div>
    <script>

    // 定义全局过滤器
        Vue.filter('dataFormat',function(data, pattern){
            var dt = new Date(data)
            var y = dt.getFullYear();
            var m = (dt.getDate()+1).toString().padStart(2,'0');//padStart 前面补***仅限字符串 也有padEnd
            var d = dt.getDay().toString().padStart(2,'0');
            if(pattern && pattern.toLowerCase()=='yyyy-mm-dd'){
                return `${y}-${m}-${d}`
            }else{
                var hh = dt.getHours().toString().padStart(2,'0');
                var mm = dt.getMinutes().toString().padStart(2,'0');
                var ss = dt.getSeconds().toString().padStart(2,'0');
               return `${y}-${m}-${d} ${hh}:${mm}:${ss}`
            }
        })
    var app = new Vue({
        el:'#app',
        data:{
            id:'',
            name:'',
            keyword:'',
            list:[
                { id:1,name:'奔驰',ctime:new Date() },
                { id:2,name:'宝马',ctime:new Date() }
            ],
            privateMSG:'这是数据'

        },
        methods: {
            add(){
                var car = { id:this.id,name:this.name ,ctime:new Date()};
                this.list.push(car);
                this.id = this.name = '';
            },
            remove(id){
                // this.list.some((item,i)=>{
                //     if(item.id == id){
                //         this.list.splice(i,1)
                //         return true;
                //     }
                // })
                var index= this.list.findIndex(item => {
                    if(item.id == id){
                        return true
                    }
                })
                this.list.splice(index,1)
            },
            search:function(keyword){
                // var newList = []
                // this.list.forEach(function(item){
                //    if(item.name.indexOf(keyword) != -1){
                //     newList.push(item)
                //    }
                // })
                // return newList

                return this.list.filter(item =>{
                    if(item.name.includes(keyword)){
                        return item
                    }
                })
                
            }
        },
        filters:{ //私有过滤器
            private:function(data,pattern) {
                return data.replace(/数据/g,'私有数据')
            }
        }

    })
    </script>
</body>
</html>

